﻿<template>
  <div class="house-management-container">
    <el-card>
      <div class="management-header">
        <div class="management-title">
          <h2>房源管理</h2>
        </div>
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新增房源
        </el-button>
      </div>

      <!-- 搜索区域 -->
      <div class="house-search">
        <div class="search-row">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入房源标题"
            style="width: 200px; margin-right: 12px"
            clearable
          />
          <el-select
            v-model="searchForm.countyId"
            placeholder="选择区域"
            style="width: 150px; margin-right: 12px"
            clearable
          >
            <el-option
              v-for="county in countyList"
              :key="county.id"
              :label="county.name"
              :value="county.id"
            />
          </el-select>
          <el-select
            v-model="searchForm.rentalType"
            placeholder="出租类型"
            style="width: 120px; margin-right: 12px"
            clearable
          >
            <el-option label="整租" :value="1" />
            <el-option label="分租" :value="2" />
          </el-select>
          <el-select
            v-model="searchForm.state"
            placeholder="房源状态"
            style="width: 150px; margin-right: 12px"
            clearable
          >
            <el-option label="未审核" :value="0" />
            <el-option label="一级审核中" :value="1" />
            <el-option label="二级审核中" :value="2" />
            <el-option label="三级审核中" :value="3" />
            <el-option label="已上架" :value="4" />
            <el-option label="已出租" :value="5" />
            <el-option label="已下架" :value="6" />
            <el-option label="审核失败" :value="7" />
          </el-select>
          <div class="rent-range-container">
            <span class="range-label">租金范围：</span>
            <el-input-number
              v-model="searchForm.rentMin"
              placeholder="最低租金"
              :min="0"
              :max="99999"
              style="width: 120px; margin-right: 8px"
              controls-position="right"
            />
            <span class="range-separator">-</span>
            <el-input-number
              v-model="searchForm.rentMax"
              placeholder="最高租金"
              :min="0"
              :max="99999"
              style="width: 120px; margin-right: 12px"
              controls-position="right"
            />
          </div>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>

      <!-- 房源卡片列表 -->
      <div class="house-cards-container" style="margin-top: 16px;">
        <div v-if="loading" class="loading-state">
          <el-skeleton :rows="3" animated />
        </div>

        <div v-else-if="houseList.length > 0" class="house-cards">
          <div
            v-for="house in houseList"
            :key="house.id"
            class="house-card"
          >
              <!-- 左侧图片 -->
              <div class="house-image">
                <img
                  :src="getFirstImage(house.imageUrls || '') || getDefaultImage()"
                  :alt="house.title"
                  class="house-img"
                  @error="handleImageError"
                />
                <div class="house-status">
                  <span class="status-tag" :class="getStatusClass(house.state)">
                    {{ getStatusText(house.state) }}
                  </span>
                </div>
                <div class="rental-type-tag">
                  <span class="rental-tag" :class="house.rentalType === 1 ? 'whole-rent' : 'shared-rent'">
                    {{ house.rentalType === 1 ? '整租' : '分租' }}
                  </span>
                </div>
              </div>

              <!-- 中间信息 -->
              <div class="house-info">
                <div class="house-card-header">
                  <h3 class="house-title">{{ house.name || house.title || '房源' + house.id }}</h3>
                  <div class="house-right">
                    <div class="house-price">
                      <span class="price-amount">{{ formatMoney(house.rent || house.price || 0) }}</span>
                      <span class="price-unit">元/月</span>
                    </div>
                  </div>
                </div>

                <div class="house-details">
                  <div class="detail-item">
                    <span class="detail-label">房源编号：</span>
                    <span class="detail-value">{{ house.houseCode || '暂无' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">房屋面积：</span>
                    <span class="detail-value">{{ house.area || '暂无' }}㎡</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">户型配置：</span>
                    <span class="detail-value">{{ house.typeNum || '暂无' }}室{{ house.type || '暂无' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">详细地址：</span>
                    <span class="detail-value">{{ house.address || '暂无' }}</span>
                  </div>
                  <div class="detail-item" v-if="house.listTime">
                    <span class="detail-label">挂牌时间：</span>
                    <span class="detail-value">{{ formatDate(house.listTime) }}</span>
                  </div>
                </div>

                <div class="house-actions">
                  <el-button type="primary" @click="handleViewDetails(house)">
                    详情
                  </el-button>
                  <el-button @click="showHouseDetail(house)">
                    编辑
                  </el-button>
                  <el-button type="danger" @click="handleDeleteHouse(house)">
                    删除
                  </el-button>
                </div>
              </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else class="empty-state">
          <el-empty description="暂无房源数据">
            <el-button type="primary" @click="handleAdd">添加房源</el-button>
          </el-empty>
        </div>
      </div>

      <!-- 分页 -->
      <div class="table-pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 房源管理对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="900px"
      :before-close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房源标题" prop="title">
              <el-input v-model="formData.title" placeholder="请输入房源标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户号" prop="num">
              <el-input-number
                v-model="formData.num"
                :min="1"
                placeholder="户号"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="租金" prop="rent">
              <el-input-number
                v-model="formData.rent"
                :min="0"
                :precision="2"
                placeholder="租金"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="几居室" prop="typeNum">
              <el-input-number
                v-model="formData.typeNum"
                :min="0"
                placeholder="几居室"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房屋面积" prop="area">
              <el-input-number
                v-model="formData.area"
                :min="0"
                :precision="2"
                placeholder="房屋面积"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户型" prop="type">
              <el-input v-model="formData.type" placeholder="请输入户型" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房源用途" prop="houseUse">
              <el-select v-model="formData.houseUse" placeholder="请选择房源用途" style="width: 100%">
                <el-option label="住宅" :value="1" />
                <el-option label="公寓" :value="2" />
                <el-option label="办公" :value="3" />
                <el-option label="商铺" :value="4" />
                <el-option label="写字楼" :value="5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="朝向" prop="orientation">
              <el-select v-model="formData.orientation" placeholder="请选择朝向" style="width: 100%">
                <el-option label="东" :value="1" />
                <el-option label="南" :value="2" />
                <el-option label="西" :value="3" />
                <el-option label="北" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="装修类型" prop="decoration">
              <el-select v-model="formData.decoration" placeholder="请选择装修类型" style="width: 100%">
                <el-option label="毛坯" :value="1" />
                <el-option label="简装" :value="2" />
                <el-option label="精装" :value="3" />
                <el-option label="豪装" :value="4" />
                <el-option label="其他" :value="5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出租类型" prop="rentalType">
              <el-select v-model="formData.rentalType" placeholder="请选择出租类型" style="width: 100%">
                <el-option label="整租" :value="1" />
                <el-option label="分租" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="房源状态" prop="state">
              <el-select v-model="formData.state" placeholder="请选择房源状态" style="width: 100%">
                <el-option label="未审核" :value="0" />
                <el-option label="一级审核中" :value="1" />
                <el-option label="二级审核中" :value="2" />
                <el-option label="三级审核中" :value="3" />
                <el-option label="已上架" :value="4" />
                <el-option label="已出租" :value="5" />
                <el-option label="已下架" :value="6" />
                <el-option label="审核失败" :value="7" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付类型" prop="payType">
              <el-select v-model="formData.payType" placeholder="请选择支付类型" style="width: 100%">
                <el-option label="付一押一" :value="1" />
                <el-option label="付一押二" :value="2" />
                <el-option label="付一押三" :value="3" />
                <el-option label="付二押一" :value="4" />
                <el-option label="付三押一" :value="5" />
                <el-option label="付三押二" :value="6" />
                <el-option label="月付" :value="7" />
                <el-option label="半年付" :value="8" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在楼层" prop="floor">
              <el-select v-model="formData.floor" placeholder="请选择所在楼层" style="width: 100%">
                <el-option label="低层" :value="1" />
                <el-option label="中层" :value="2" />
                <el-option label="高层" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房源核验码" prop="houseCode">
              <el-input v-model="formData.houseCode" placeholder="请输入房源核验码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="区域" prop="region">
              <el-select v-model="formData.region" placeholder="请选择区域" style="width: 100%">
                <el-option
                  v-for="county in countyList"
                  :key="county.id"
                  :label="county.name"
                  :value="county.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="房东要求" prop="need">
              <el-input
                v-model="formData.need"
                type="textarea"
                :rows="2"
                placeholder="请输入房东要求"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="房源描述" prop="description">
              <el-input
                v-model="formData.description"
                type="textarea"
                :rows="3"
                placeholder="请输入房源描述"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            {{ isEdit ? '更新' : '保存' }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 房源详情侧滑面板 -->
    <el-drawer
      v-model="showHouseDetailDrawer"
      title="房源详情"
      direction="rtl"
      size="500px"
      :before-close="handleDrawerClose"
    >
      <div v-if="currentHouse" class="house-detail-content">
        <div class="detail-section">
          <h4>基本信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="detail-label">房源标题：</span>
              <span class="detail-value">{{ currentHouse.title }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">户号：</span>
              <span class="detail-value">{{ currentHouse.num }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">租金：</span>
              <span class="detail-value">{{ formatMoney(currentHouse.rent) }}元/月</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">面积：</span>
              <span class="detail-value">{{ currentHouse.area }}㎡</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">户型：</span>
              <span class="detail-value">{{ currentHouse.typeNum }}室{{ currentHouse.type }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">状态：</span>
              <span class="detail-value">{{ getStatusText(currentHouse.state) }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section" v-if="currentHouse.description">
          <h4>房源描述</h4>
          <p class="description-text">{{ currentHouse.description }}</p>
        </div>

        <div class="detail-section" v-if="currentHouse.imageUrls">
          <h4>房源图片</h4>
          <div class="image-gallery">
            <img
              v-for="(image, index) in getImageList(currentHouse.imageUrls)"
              :key="index"
              :src="image"
              :alt="`房源图片${index + 1}`"
              class="detail-image"
              @error="handleImageError"
            />
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import baseService from '@/service/baseService'

// 响应式数据
const loading = ref(false)
const houseList = ref<any[]>([])
const countyList = ref<any[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 搜索表单
const searchForm = reactive({
  title: '',
  countyId: null,
  rentalType: null,
  state: null,
  rentMin: null,
  rentMax: null
})

// 对话框相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)
const submitLoading = ref(false)
const formRef = ref()

// 表单数据
const formData = reactive({
  id: null,
  title: '',
  num: null,
  rent: null,
  typeNum: null,
  area: null,
  type: '',
  houseUse: null,
  orientation: null,
  decoration: null,
  rentalType: null,
  state: 0,
  payType: null,
  floor: null,
  houseCode: '',
  region: '',
  address: '',
  need: '',
  description: '',
  imageUrls: ''
})

// 表单验证规则
const formRules = {
  title: [
    { required: true, message: '请输入房源标题', trigger: 'blur' }
  ],
  num: [
    { required: true, message: '请输入户号', trigger: 'blur' }
  ],
  rent: [
    { required: true, message: '请输入租金', trigger: 'blur' }
  ],
  typeNum: [
    { required: true, message: '请输入几居室', trigger: 'blur' }
  ],
  area: [
    { required: true, message: '请输入房屋面积', trigger: 'blur' }
  ]
}

// 房源详情侧滑面板
const showHouseDetailDrawer = ref(false)
const currentHouse = ref<any>(null)

// 工具函数
const formatMoney = (amount: number) => {
  return new Intl.NumberFormat('zh-CN').format(amount || 0)
}

const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

const getFirstImage = (imageUrls: string) => {
  if (!imageUrls) return ''
  const urls = imageUrls.split(',').filter(url => url.trim())
  return urls.length > 0 ? urls[0].trim() : ''
}

const getImageList = (imageUrls: string) => {
  if (!imageUrls) return []
  return imageUrls.split(',').filter(url => url.trim()).map(url => url.trim())
}

const getDefaultImage = () => {
  return ''
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  console.warn('图片加载失败:', img.src)
  img.src = getDefaultImage()
  img.onerror = null
}

const getStatusText = (state: number) => {
  const statusMap: { [key: number]: string } = {
    0: '未审核',
    1: '一级审核中',
    2: '二级审核中',
    3: '三级审核中',
    4: '已上架',
    5: '已出租',
    6: '已下架',
    7: '审核失败'
  }
  return statusMap[state] || '未知状态'
}

const getStatusClass = (state: number) => {
  const classMap: { [key: number]: string } = {
    0: 'status-pending',
    1: 'status-reviewing',
    2: 'status-reviewing',
    3: 'status-reviewing',
    4: 'status-online',
    5: 'status-rented',
    6: 'status-offline',
    7: 'status-failed'
  }
  return classMap[state] || 'status-pending'
}

// API调用函数
const getHouseList = async () => {
  loading.value = true
  try {
    const queryParams = {
      page: currentPage.value,
      limit: pageSize.value,
      title: searchForm.title || undefined,
      state: searchForm.state || undefined,
      rentalType: searchForm.rentalType || undefined,
      rentMin: searchForm.rentMin || undefined,
      rentMax: searchForm.rentMax || undefined,
      region: searchForm.countyId || undefined
    }

    const filteredParams = Object.fromEntries(
      Object.entries(queryParams).filter(([_, value]) => value !== undefined)
    )

    const response = await baseService.get('/rental/areaplothouse/page/advanced', filteredParams)

    if (response.code === 0) {
      houseList.value = response.data.list || []
      total.value = response.data.total || 0
    } else {
      ElMessage.error(response.msg || '获取房源列表失败')
    }
  } catch (error) {
    console.error('获取房源列表失败:', error)
    ElMessage.error('获取房源列表失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

const getCountyList = async () => {
  try {
    const response = await baseService.get('/rental/areacounty/getAllCounty')
    if (response.code === 0) {
      countyList.value = response.data || []
    } else {
      ElMessage.error(response.msg || '获取区域列表失败')
    }
  } catch (error) {
    console.error('获取区域列表失败:', error)
    ElMessage.error('获取区域列表失败，请检查网络连接')
  }
}

// 事件处理函数
const handleSearch = () => {
  currentPage.value = 1
  getHouseList()
}

const handleReset = () => {
  Object.assign(searchForm, {
    title: '',
    countyId: null,
    rentalType: null,
    state: null,
    rentMin: null,
    rentMax: null
  })
  handleSearch()
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  getHouseList()
}

const handleAdd = () => {
  isEdit.value = false
  dialogTitle.value = '新增房源'
  resetFormData()
  dialogVisible.value = true
}

const showHouseDetail = (house: any) => {
  isEdit.value = true
  dialogTitle.value = '编辑房源'
  Object.assign(formData, house)
  dialogVisible.value = true
}

const handleViewDetails = (house: any) => {
  currentHouse.value = house
  showHouseDetailDrawer.value = true
}

const resetFormData = () => {
  Object.assign(formData, {
    id: null,
    title: '',
    num: null,
    rent: null,
    typeNum: null,
    area: null,
    type: '',
    houseUse: null,
    orientation: null,
    decoration: null,
    rentalType: null,
    state: 0,
    payType: null,
    floor: null,
    houseCode: '',
    region: '',
    address: '',
    need: '',
    description: '',
    imageUrls: ''
  })
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

const handleDialogClose = () => {
  dialogVisible.value = false
  resetFormData()
}

const handleDrawerClose = () => {
  showHouseDetailDrawer.value = false
  currentHouse.value = null
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    submitLoading.value = true

    const url = isEdit.value ? `/rental/areaplothouse/${formData.id}` : '/rental/areaplothouse/create'
    const method = isEdit.value ? 'put' : 'post'

    const response = await baseService[method](url, formData)

    if (response.code === 0) {
      ElMessage.success(isEdit.value ? '更新成功' : '新增成功')
      handleDialogClose()
      getHouseList()
    } else {
      ElMessage.error(response.msg || '操作失败')
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败，请检查网络连接')
  } finally {
    submitLoading.value = false
  }
}

const handleDeleteHouse = async (house: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除房源"${house.title}"吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const response = await baseService.delete(`/rental/areaplothouse/${house.id}`)

    if (response.code === 0) {
      ElMessage.success('删除成功')
      getHouseList()
    } else {
      ElMessage.error(response.msg || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}



// 初始化
onMounted(() => {
  getHouseList()
  getCountyList()
})
</script>

<style scoped>
.house-management-container {
  padding: 0;
}

.management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.management-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.house-search {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rent-range-container {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.range-label {
  margin-right: 8px;
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.range-separator {
  margin: 0 8px;
  color: #909399;
}

.house-cards-container {
  min-height: 400px;
}

.loading-state {
  padding: 40px;
}

.house-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.house-card {
  display: flex;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: 200px;
}

.house-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.house-image {
  position: relative;
  width: 280px;
  height: 200px;
  flex-shrink: 0;
}

.house-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.house-status {
  position: absolute;
  top: 8px;
  left: 8px;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.status-pending {
  background: #909399;
}

.status-reviewing {
  background: #e6a23c;
}

.status-online {
  background: #67c23a;
}

.status-rented {
  background: #409eff;
}

.status-offline {
  background: #f56c6c;
}

.status-failed {
  background: #f56c6c;
}

.rental-type-tag {
  position: absolute;
  top: 8px;
  right: 8px;
}

.rental-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.whole-rent {
  background: #409eff;
}

.shared-rent {
  background: #67c23a;
}

.house-info {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.house-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.house-price {
  text-align: right;
}

.price-amount {
  font-size: 24px;
  font-weight: 700;
  color: #f56c6c;
}

.price-unit {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.house-details {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.detail-label {
  color: #909399;
  margin-right: 4px;
  white-space: nowrap;
}

.detail-value {
  color: #606266;
  font-weight: 500;
}

.house-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.table-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 房源详情侧滑面板样式 */
.house-detail-content {
  padding: 20px;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 8px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.detail-label {
  color: #909399;
  margin-right: 8px;
  white-space: nowrap;
  min-width: 80px;
}

.detail-value {
  color: #606266;
  font-weight: 500;
}

.description-text {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.detail-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-row > * {
    margin-right: 0 !important;
    margin-bottom: 8px;
  }

  .rent-range-container {
    margin-right: 0;
  }

  .house-card {
    flex-direction: column;
  }

  .house-image {
    width: 100%;
    height: 240px;
  }

  .house-details {
    grid-template-columns: 1fr;
  }

  .house-actions {
    flex-wrap: wrap;
  }

  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .detail-image {
    height: 100px;
  }
}
</style>
